<template>
  <div class="headerbox">
    <div
      class="headerboxtwo"
      v-for="(item, index) in datalist"
      :key="item.productId"
    >
      <!-- 单选按钮 -->
      <div
        class="divbutton"
        :v-model="item.checked"
        @click="selfButton(index)"
      ></div>
      <van-swipe-cell class="vanone">
        <van-card
         @click="$router.push('/detail/'+item.productId)"
          :desc="item.name"
          :title="item.subtitle"
          class="goods-card"
          :thumb="item.imageHost + item.mainImage"
        />
        <div class="price">
          <span>￥ {{ item.price }}</span>
          <div><van-stepper v-model="item.count" disable-input /></div>
        </div>
        <template #footer>
          <van-stepper class="totol" plus v-model="value" />
        </template>
        <template #right>
          <van-button
            square
            @click="delItem(item.productId)"
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="headeruser">
      <div>
        <van-icon @click="$router.go(-1)" class="threeone" name="arrow-left" />
      </div>
      <div>
        <span>购物车</span>
      </div>
      <div><van-icon class="three" name="ellipsis" /></div>
    </div>

    <div class="wanthas">
      <span>可能你还想要</span>
    </div>

    <div class="car-box">
      <div
        v-for="item in list"
        :key="item.id"
        @click="$router.push('/detail/' + item.id)"
        class="goods"
      >
        <img :src="item.imageHost + item.mainImage" alt="" />
        <p>{{ item.name }}</p>
        <i>￥ {{ item.price }}</i>
      </div>
    </div>

    <div>
      <div>
        <van-submit-bar
          class="box"
          :price="allprice"
          button-text="提交订单"
        >
          <!-- 全选按钮 -->
          <van-checkbox class="allbtn" @click="allchoose" v-model="checkedall"
            >全选</van-checkbox
          >
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
// import { getcarlist } from "../../../network/routerheader";
import qs from 'qs'
import { Dialog } from "vant";
export default {
  created() {
    this.getlist();
    this.addlsit();
    this.totol()
  },
  // mounted() {
  //   this.buttonItem()
  // },
  data() {
    return {
      list: [],
      datalist: [],
      flag: true,
      checkedall: false,
      checked: true,
      allprice:0
    };
  },
  // computed(){
  //   this.totle()
  // },
  methods: {
    shouwItem() {
      this.flag = !this.flag;
    },
    onSubmit() {
      this.checked = !this.checked;
    },
    async getlist() {
      // getcarlist((res) => {
      //   if (res.status === 0) {
      //     this.list = res.data;
      //   }
      // });
      const res = await this.$require({
        url: "/product/recommend",
        method: "get",
      });
      // console.log(res);
      if (res.status == 200) {
        this.list = res.data.data;
        // console.log(this.list);
      }
      // console.log(window.listdata);
    },
    // 增加
    async addlsit() {
      const res = await this.$require({
        url: "/cart/list",
        method: "get",
      });
      // console.log(res);
      if (res.status == 200) {
        this.datalist = res.data.data;
        
        for (let i = 0; i < this.datalist.length; i++) {
          this.datalist[i].checked = false;
          // console.log(this.datalist);
          // console.log("for循环里面", this.datalist[i].checked);
          // console.log("ddddddd");
        }
      }
    },
    // 删除
    async delItem(productId) {
      const params={id:productId}
      // console.log(params);
      const datadel=qs.stringify(params)
      console.log(datadel);
      const res = await this.$require({
        url: '/cart/del',
        method: 'post',
        data:datadel
      })
      // console.log(res);
      if(res.statue==200){
        this.getlist()
      }
      // console.log(id);
      //  location.reload()
    },

   //按钮处理
    selfButton(index) {
      // console.log(index);
       const btn=document.querySelectorAll('.divbutton')
      if (this.datalist[index].checked) {
         this.datalist[index].checked = false;
      btn[index].style.backgroundColor=''
      this.checkedall=false
      this.allprice=0
        // console.log("22222222222", this.datalist[index].checked);
      } else {
        btn[index].style.backgroundColor='skyblue'
        this.datalist[index].checked = true;
        // console.log("1111", this.datalist[index].checked);
      }
      this.allButton(index)
        this.totol()
    },
    allButton() {
      let allbtn=0
     for(let i=0;i<this.datalist.length;i++){
        if(this.datalist[i].checked){
          allbtn++
        }else{
          return
        }
        if(allbtn==this.datalist.length){
          this.checkedall=true
        }
     }
    },
    
    //全选按钮
    allchoose(){
     const btn=document.querySelectorAll('.divbutton')
     for(let i=0;i<this.datalist.length;i++){
        if (!this.checkedall) {
         this.datalist[i].checked = false;
      btn[i].style.backgroundColor=''
      this.allprice=0
      } else {
        btn[i].style.backgroundColor='skyblue'
        this.datalist[i].checked = true;
      }
      this.totol()
     }
    },
     //计算价格
    totol(){
      this.allprice=0
     for(let i=0;i<this.datalist.length;i++){
        if(this.datalist[i].checked){
       this.allprice +=this.datalist[i].price*this.datalist[i].count*100
          // console.log(this.datalist[i].price*this.datalist[i].count);
        }
     }
    }
  },
};
</script>

<style lang="scss" scoped>
.divbutton {
  width: 20px;
  height: 20px;
  border-radius: 25px;
  border: 1px solid #969799;
}
.price {
  display: flex;
  span {
    flex: 2;
    color: #f63515;
    font-size: 15px;
  }
  div {
    flex: 1;
  }
}
.box {
  position: fixed;
  // top: 200px;
  bottom: 50px;
  z-index: 50;
  // z-index: 99;
}
.flaw {
  z-index: 99;
}
.delete-button {
  height: 100px;
}
.headeruser {
  width: 100%;
  height: 48px;
  display: flex;
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #f7f7f7;
  div {
    flex: 1;
    font-size: 18px;
    color: #000000;
    margin: 10px 0px;
    z-index: 99;
    .three {
      font-size: 26px;
      margin-left: 60px;
      font-weight: bold;
    }
    .threeone {
      font-weight: bold;
      font-size: 20px;
    }
    span {
      display: block;
      margin: 0px 35px;
    }
  }
}

.headerbox {
  margin-top: 50px;
}

.headerboxtwo {
  display: flex;
  .buttonone {
    width: 20px;
    flex: 1;
  }
  .vanone {
    flex: 13;
  }
}
.wanthas {
  width: 355px;
  line-height: 0px;
  position: relative;
  color: #969799;
  background-color: #fff;
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
}
.car-box {
  div {
    width: 166px;
    height: 226px;
    padding: 10px;
    float: left;
    border: 0.1px solid #969799;
    padding-bottom: 0px;
    img {
      width: 166px;
      height: 145px;
    }
    p {
      padding: 0;
      margin: 0;
      color: #333333;
      font-size: 13px;
    }
    i {
      display: block;
      margin-left: 0;
      font-size: 16px;
      color: #f63515;
    }
  }
}
.buttom {
  width: 345px;
  height: 50px;
  padding: 0 16px;
  .van-radio {
    color: red;
  }
}
</style>